<template>
  <div class="input-panel">
    <div class="panel-header">
      <h3>{{ title }}</h3>
      <div class="panel-actions">
        <a-upload
          :before-upload="handleFileUpload"
          :show-upload-list="false"
          accept=".md,.txt,.json,.js,.ts,.vue,.html,.css"
        >
          <a-button type="text" size="small">
            <template #icon>
              <UploadOutlined />
            </template>
            上传文件
          </a-button>
        </a-upload>
        <a-button type="text" size="small" @click="clearContent">
          <template #icon>
            <ClearOutlined />
          </template>
          清空
        </a-button>
      </div>
    </div>
    <div class="input-wrapper">
      <a-textarea
        :value="content"
        @update:value="updateContent"
        :placeholder="placeholder"
        :rows="20"
        class="content-input"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { UploadOutlined, ClearOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

interface Props {
  title: string
  content: string
  placeholder: string
}

interface Emits {
  (e: 'update:content', value: string): void
  (e: 'file-uploaded', fileName: string): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 更新内容
const updateContent = (value: string) => {
  emit('update:content', value)
}

// 清空内容
const clearContent = () => {
  emit('update:content', '')
}

// 文件上传处理
const handleFileUpload = (file: File) => {
  const reader = new FileReader()
  reader.onload = (e) => {
    const content = e.target?.result as string
    emit('update:content', content)
    emit('file-uploaded', file.name)
    message.success(`文件 ${file.name} 上传成功`)
  }
  reader.readAsText(file)
  return false // 阻止默认上传行为
}
</script>

<style scoped>
.input-panel {
  background: rgba(248, 250, 252, 0.8);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(102, 126, 234, 0.1);
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.panel-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.panel-actions {
  display: flex;
  gap: 8px;
}

.content-input {
  border-radius: 12px;
  border: 2px solid rgba(102, 126, 234, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(255, 255, 255, 0.9);
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
}

.content-input:focus,
.content-input:hover {
  border-color: #667eea;
  box-shadow:
    0 0 0 4px rgba(102, 126, 234, 0.15),
    0 8px 24px rgba(102, 126, 234, 0.15);
  background: rgba(255, 255, 255, 1);
}
</style>
